<template>
	<view class="page">
		<!-- 标题栏 start -->
		<fu-custom :isBack="true" bgColor="bg-white" class="header" :isBottom="true">
			<block slot="content">{{i18n['注销账号']}}</block>
			<block slot="right">
			</block>
		</fu-custom>
		<view class=" ">
			<view class="padding-lr">
				<view class="padding-tb text-lg ">{{i18n['账号注销']}}</view>
				<view class="wrap text-df text-666">{{i18n['永久注销且无法恢复，请谨慎操作']}}</view>
				<view class="padding-tb text-lg">{{i18n['请选择注销原因']}}</view>
				<view class=" text-666">
					<view @click="onChangeReson(item, index)" class="item flex align-center justify-between"
						v-for="(item, index) in reasonList" :key="index">
						<view class="padding-left-xs">{{ item.name }}</view>
						<radio :checked="index == cancelObj.current" style="transform: scale(0.7);" color="#FF4848">
						</radio>
						<!-- <image v-if="index == cancelObj.current" class="item-img" src="../../static/select.png"
						  mode="aspectFit"></image> -->
						<!-- <image v-else src="../../static/icon-select-1.png" mode="aspectFit" class="item-img"> -->
						<!-- </image> -->
					</view>
				</view>
			</view>
			<view class="bg-f8 height-20">		</view>
			<view class="padding-lr padding-top-sm">
				<view class=" text-lg">{{i18n['请填写注销原因']}}</view>
				<textarea class="textarea-box margin-top margin-bottom radius-8" placeholder-class="text-999"
					v-model="cancelReason" :placeholder="i18n['请填写注销原因']"></textarea>
			</view>
			<view class="padding-lr">
				<view class="login-btn" @click="handleNext">
					{{i18n['下一步']}}
				</view>
			</view>

		</view>
		<!-- 断网监测 start -->
		<fu-notwork></fu-notwork>
		<!-- 断网监测 end -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cancelObj: {
					//订单取消对象
					current: -1, //当前原因索引
					id: null, //当前id
					reason: '', //文字

				},
				cancelReason: '', //注销原因
				types: '', //类型
				reasonList: [],
				checked: false
			}
		},
		onLoad() {
			this.get_feedback_type()
		},
		computed: {
			// 用户信息
			userInfo() {
				return this.$store.getters.userInfo;
			}
		},
		methods: {
			onChangeReson(item, index) {
				if (this.cancelObj.current == index) return false;
				this.cancelObj.current = index;
				this.cancelObj.id = item.aid;
				this.cancelObj.reason = item.name
			},
			/**
			 * @description 获取注销原因数据
			 */
			get_feedback_type() {
				let that = this;
				this.$api.post('/v1/619b0e563868e')
					.then(res => {
						if (res.data.code == 1) {
							let result = res.data.data;
							that.reasonList = result; //获取反馈类型数据
							this.cancelObj.current = 0
							this.cancelObj.id = this.reasonList[0].aid
							this.cancelObj.reason = this.reasonList[0].name
							// that.active = result.types[0] && result.types[0].id; //默认选中第一个反馈类型
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			/* // 获取注销原因
			 getData() {
			   this.$api.post(global.apiUrls.cancelAccount).then(res => {
			     if (res.data.code == 1) {
			       console.log(res.data)
			       this.reasonList = res.data.data
			       // 初始化默认选中
			       if(this.reasonList.length > 0){
			         this.cancelObj.current = 0
			         this.cancelObj.id = this.reasonList[0].id
			       }
			     } else {
			       uni.showToast({
			         title: res.data.msg,
			         icon: 'none'
			       });
			     }
			   })
			 }, */
			handleNext() {
				if (!this.cancelReason) {
					return this.$message.info('请填写注销原因')
				}
				uni.redirectTo({
					url: '../affirm-cancel-account/index?argument=' + this.cancelReason + '&reason=' + this.cancelObj.id
				})

			}
		},
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background: #ffffff;
	}

	.content {
		min-height: 800rpx;
	}

	.agreement {
		display: flex;
		width: 100%;
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #666666;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;

		.image {
			height: 28rpx;
			width: 28rpx;
			margin-right: 12rpx;
		}

		text {
			color: #FFA133;
		}
	}

	.login-btn {
		height: 88rpx;
		line-height: 88rpx;
		background: $bgtheme;
		border-radius: 80rpx;
		margin: 100rpx 0 0;
		font-size: 32rpx;
		color: #FFFFFF;
		font-family: PingFang SC;
		font-weight: 500;
		text-align: center;
	}

	.checkbox-list {
		padding: 20rpx 15rpx;
	}

	.item {
		padding-bottom: 32rpx;

		.item-img {
			width: 32rpx;
			height: 32rpx;
		}

		.item-label {
			margin-left: 10rpx;
		}
	}

	.textarea-box {
		width: 100%;
		height: 202rpx;
		border: 1px solid #EEEEEE;
		border-radius: 6rpx;
		box-sizing: border-box;
		padding: 20rpx;
		color: #333333;
		font-size: 28rpx;
	}
</style>
